<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="author" content="Bax">
	<title>VicGame</title>
	
	<!-- Reset styles -->
	<link href="css/reset.css" rel="stylesheet" type="text/css" />
	
	<!-- Load jQuery and jQWidgets frameworks -->
	<link href="scripts/jqwidgets/styles/jqx.base.css" rel="stylesheet" type="text/css" />
	<link href="scripts/jqwidgets/styles/jqx.summer.css" rel="stylesheet" type="text/css" />
	
	<link href="css/styles.css" rel="stylesheet" type="text/css" />
	
	<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="scripts/jqwidgets/jqxcore.js"></script>
	
	<!-- Set custom styles -->
	<link href="css/main.css" rel="stylesheet" type="text/css" />
	
	<!-- Load jQWidgets' required widgets -->
	<script type="text/javascript" src="scripts/jqwidgets/jqxbuttons.js"></script>
	<script type="text/javascript" src="scripts/jqwidgets/jqxscrollbar.js"></script>
	<script type="text/javascript" src="scripts/jqwidgets/jqxpanel.js"></script>
	<script type="text/javascript" src="scripts/jqwidgets/jqxnumberinput.js"></script>
	<script type="text/javascript" src="scripts/jqwidgets/jqxlistbox.js"></script>
	<script type="text/javascript" src="scripts/jqwidgets/jqxdropdownlist.js"></script>
	<script type="text/javascript" src="scripts/jqwidgets/jqxexpander.js"></script>
	<script type="text/javascript" src="scripts/jqwidgets/jqxnavigationbar.js"></script>
	<script type="text/javascript" src="scripts/jqwidgets/jqxcheckbox.js"></script>
	<script type="text/javascript" src="scripts/jqwidgets/jqxtabs.js"></script>
	<script type="text/javascript" src="scripts/jqwidgets/jqxwindow.js"></script>
	
	<!-- Load SFS2X JS API -->
	<script type="text/javascript" src="scripts/SFS2X_API_JS.js"></script>
	
	<!-- Load main script -->
	<script type="text/javascript" src="scripts/Init.js"></script>
	<script type="text/javascript" src="scripts/View.js"></script>
	<script type="text/javascript" src="scripts/Logic/Game.js"></script>
	<script type="text/javascript" src="scripts/Command/BaseCommandDefinition.js"></script>
	
	<!-- Initialize user interface -->
	<script type="text/javascript">
		$(document).ready(function () {
			
			var theme = "summer";
			
			// Init main widgets
			$("#connectBt").jqxButton({width:100, theme:theme});
			$("#disconnectBt").jqxButton({width:100, theme:theme, disabled:true});
			$("#loginBt").jqxButton({width:100, theme:theme, disabled:true});
			$("#logoutBt").jqxButton({width:100, theme:theme});
			$("#publicChatAreaPn").jqxPanel({width:578, height:350, theme:theme, disabled:true, autoUpdate:true});
			$("#sendPublicMsgBt").jqxButton({width:100, theme:theme, disabled:true});
			$("#countryDd").jqxDropDownList({source:["Italy", "Spain", "United Kingdom", "United States"], width:150, height:22, dropDownHeight:100, selectedIndex:0});
			$("#rankingIn").jqxNumberInput({width:60, height:22, decimalDigits:0, spinButtons:true, decimal:3, min:0, max:5, inputMode:"simple", theme:theme});
			$("#sideBar").jqxNavigationBar({width:240, height:535, sizeMode:"fitAvailableHeight", theme:theme});
			$("#quickJoinBt").jqxButton({width:220, theme:theme});
			$("#roomList").jqxListBox({source:[], width:238, height:348, theme:theme});
			$("#createGameBt").jqxButton({width:220, theme:theme});
			$("#userList").jqxListBox({source:[], width:238, height:435, theme:theme});
			$("#inviteUserBt").jqxButton({width:220, theme:theme, disabled:true});
			$("#gameLogPn").jqxPanel({width:620, height:425, theme:theme, autoUpdate:true});
			$("#leaveGameBt").jqxButton({width:100, theme:theme});
			
			// Init game room creation window widgets
			$("#createGameWin").jqxWindow({width:500, height:320, isModal:true, autoOpen:false, resizable:false, draggable:false, cancelButton:$("#cancelBt"), showAnimationDuration: 200, closeAnimationDuration: 100, theme:theme});
			$("#createGameWinTabs").jqxTabs({width:"100%", height:250, theme:"classic"});
			$("#doCreateGameBt").jqxButton({width:100, theme:theme});
			$("#cancelBt").jqxButton({width:100, theme:theme});
			$("#gameTypeDd").jqxDropDownList({source:["Texas Hold'em", "Blackjack", "Gin Rummy", "Poker"], width:150, height:22, dropDownHeight:100, selectedIndex:0});
			$("#maxPlayersIn").jqxNumberInput({width:80, height:20, decimalDigits:0, spinButtons:true, decimal:4, min:2, inputMode:"simple", theme:theme});
			$("#minPlayersIn").jqxNumberInput({width:80, height:20, decimalDigits:0, spinButtons:true, decimal:2, min:2, inputMode:"simple", theme:theme});
			$("#isPublicCb").jqxCheckBox({width:24, height:24, checked:true, theme:theme});
			$("#userSelector").jqxListBox({source:[], width:150, height:90, disabled:true, multiple:true, theme:theme});
			
			// Invitation window widgets
			$("#invitationWin").jqxWindow({width:500, isModal:true, autoOpen:false, resizable:false, draggable:false, showCloseButton:false, showAnimationDuration: 200, closeAnimationDuration: 100, theme:theme});
			$("#acceptBt").jqxButton({width:100, theme:theme});
			$("#refuseBt").jqxButton({width:100, theme:theme});
			$("#xxxx").jqxButton(); // One more widget is needed in the invitation panel to avoid the Refuse button to be grayed out -- no idea why!
			
			// Add event listeners
			$("#connectBt").click(onConnectBtClick);
			$("#loginBt").click(onLoginBtClick);
			$("#disconnectBt").click(onDisconnectBtClick);
			$("#logoutBt").click(onLogoutBtClick);
			$("#sendPublicMsgBt").click(onSendPublicMessageBtClick);
			$("#countryDd").change(onPlayerProfileChange);
			$("#rankingIn").bind("valuechanged", onPlayerProfileChange);
			$("#userList").bind("select", onUserSelected);
			$("#roomList").bind("select", onRoomSelected);
			$("#inviteUserBt").click(onInviteUserBtClick);
			$("#leaveGameBt").click(onLeaveGameBtClick);
			$("#quickJoinBt").click(onQuickJoinBtClick);
			$("#createGameBt").click(onCreateGameBtClick);
			$("#isPublicCb").bind("change", onPublicGameChange);
			$("#maxPlayersIn").bind("valuechanged", onMaxPlayersChange);
			$("#minPlayersIn").bind("valuechanged", onMinPlayersChange);
			$("#createGameWin").bind("closed", onCreateGameWinClose);
			$("#doCreateGameBt").click(onDoCreateGameBtClick);
			$("#acceptBt").click(onAcceptInvBtClick);
			$("#refuseBt").click(onRefuseInvBtClick);
	    });
	</script>
</head>

<body onLoad="init()">
	<div id="main" class="group">
		<div id="login" class="hidden viewStack">
			<h2>Connect</h2>
			<div class="group vSep20">
				<input type="button" id="connectBt" value="Connect"/>
				<input type="button" id="disconnectBt" value="Disconnect"/>
			</div>
			<h2>Login</h2>
			<div class="group vSep10">
				<input type="text" id="usernameIn" class="textInput" disabled="true" placeholder="Your username"/>
				<input type="button" id="loginBt" value="Login"/>
			</div>
			<div id="errorLb" class="error invisible vSep10">&nbsp;</div>
		</div>
		<div id="lobby" class="hidden viewStack">
			<h1>Welcome to <b id="roomLb">&nbsp;</b></h1>
			<div id="sideBar">
				<!-- RoomList -->
				<div>Public games</div>
				<div>
					<div class="listControls">
						<input type="button" id="quickJoinBt" value="Quick game join"/>
					</div>
					<div id="roomList"></div>
					<div class="listControls">
						<p class="smallNote">Private games are not displayed; they can be joined upon invitation only</p>
						<input type="button" id="createGameBt" value="Start new game"/>
					</div>
				</div>

				<!-- UserList-->
				<div>Available players</div>
				<div>
					<div id="userList"></div>
					<div class="listControls">
						<input type="button" id="inviteUserBt" value="Challenge selected user"/>
					</div>
				</div>
			</div>
			<div id="chatbox" class="leftBox">
				<h2>Public chat</h2>
				<div id="publicChatAreaPn"></div>
				<div class="chatControls">
					<input type="text" id="publicMsgIn" class="textInput" disabled="true" placeholder="Type your message &amp; hit send" style="width: 363px;"/>
					<input type="button" id="sendPublicMsgBt" value="Send"/>
					<input type="button" id="logoutBt" value="Logout"/>
				</div>
			</div>
		</div>
		<div id="game" class="hidden viewStack">
			<h1>Play your <b>game</b></h1>
			<div id="gameLogPn"></div>
			<input type="button" id="leaveGameBt" value="Leave game"/>
		</div>
	</div>
	
	<!-- Game Room creation popup window -->
	<div id="createGameWin">
		<div id="createGameWinHeader">
			<strong>Create new game</strong>
		</div>
		<div id="createGameWinContent">
			<div id="createGameWinTabs">
				<ul>
					<li>Create New Room</li>
				</ul>
				<div>
					<div class="item"><label>Name:</label><input type="text" id="gameNameIn" class="textInput"/></div>
					<div class="item"><label>Maximum players:</label><div id="maxPlayersIn" class="numInput"></div></div>
					<div class="item"><label>Min players to start:</label><div id="minPlayersIn" class="numInput"></div></div>
				</div>
			</div>
			
			<div id="createGameWinControls" class="popupWinControls">
				<input type="button" id="doCreateGameBt" class="leftButton" value="Create"/>
				<input type="button" id="cancelBt" class="rightButton" value="Cancel"/>
			</div>
		</div>
	</div>
	
	<button onclick="requestJoinedRoom();">Join room</button>
	<button onclick="newGameClick();">Start Game</button>
		
	<div id="board" style="border:1px; width: 900px; margin: 0px auto; display:none;" >
		<div id="page">
	    <h1>GAME</h1>
	    <div id="zone_score" class="cf">
	      <div class="col_score">
	        <div id="best_score">
	          Best score : <span id="best_score_num">0</span>
	        </div>
	        <div id="current_score">
	          Score : <span id="current_score_num">300</span>
	        </div>
	      </div>
	      <div class="col_combo">
	        <div id="best_combo">
	          Best combo : <span id="best_combo_num">0</span>
	        </div>
	        <div id="current_combo">
	          Combo : <span id="current_combo_num">3</span>
	        </div>
	      </div>
	      <div class="col_moves">
	        <span id="moves"></span>
	      </div>
	    </div> <!-- /#zone_score -->
	    <div id="zone_jeu" style="height: 640px; width: 640px; background-size: 160px;">
	   	</div> <!-- /#zone_jeu -->
	
	    <div id="zone_message"></div> <!-- /#zone_message -->
	
	  </div> <!-- /#page -->
	</div>
</body>
</html>